<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [colspan] {
            background: red;
        }
        td{
            width: 200px;
            height: 30px;
            text-align: center;
        }
        select, button {
            height: 30px;
        }
        input{
            height: 20px;
        }
        div {
            margin-bottom: 4px;
        }
 
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 
 
<div id="root">
    <select id="select1" v-model="select1">
        <option value="1">美元</option>
        <option value="2">人民币</option>
        
    </select>
    <button @click="change1">互换</button>
    <select id="select2" v-model="select2">
        <option value="1">美元</option>
        <option value="2">人民币</option>
        
    </select>
    数额:
    <input id="inputStr" v-model="inputStr" >
 
    <button @click="click1">汇率换算</button>
 
<table border="1px">
    <tr>
        <td colspan="3">按当前汇率兑换结果</td>
    </tr>
    <tr id="tr1">
        <td id="td11" v-text="td11">美元</td>
        <td>汇率</td>
        <td id="td13" v-text="td13">人民币</td>
    </tr>
    <tr id="tr2">
        <td id="td21" v-text="inputStr">100</td>
        <td id="td22" v-text="rate">7</td>
        <td id="td23" v-text="money">700</td>
    </tr>
</table>
</div>
 
<script>
    new Vue({
        el:'#root',
        data:{
            inputStr:'100',
            listRate:[1, 6.8,  0.9 , 100, 1000, 7],
            listM:['美元', '人民币'],
            select1:1,
            select2:2,
            money:700,
            rate:1,
            td11:'美元',
            td13:'人民币'
        },
        methods:{
            //按钮-互换的功能
            change1:function () {
                var mid = this.select1
                this.select1 = this.select2
                this.select2 = mid
            },
            //汇率计算显示
            click1:function () {
                //计算汇率
                this.rate= this.listRate[this.select2-1] / this.listRate[this.select1-1]
                //显示table第三行
                this.td11 = this.listM[this.select1-1];
                this.td13 = this.listM[this.select2-1];
                this.money = this.rate * this.inputStr;
                console.log(this.money)
            }
        }
    })
</script>
</body>
</html>